<html>

<head>
    <meta charset="utf-8">
    <title> 个人资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/shop/static/css/headpic.css" media="all" />
    <link rel="stylesheet" href="/shop/static/layui/css/layui.css" media="all" type="text/css">
    <link rel="stylesheet" href="/shop/static/css/public.css" media="all" type="text/css"> </head>

<body class="childrenBody">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>我的信息</legend>
	</fieldset>
    <form id="infoForm" class="layui-form" lay-filter="example">
        <input type="hidden" name="id" id="id" value="${info.id!'0'}">
        <input type="hidden" name="headPortrait" id="headPortrait" value="${info.headPortrait!'/shop/static/images/userface4.jpg'}">
        <div class="layui-col-md6 layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block"> 
                	<a class="img" title="我的头像" ><img id="upload" class="shop-logo" alt="点击上传" src="${info.headPortrait!'/shop/static/images/userface4.jpg'}"></a>
                    <input id="upfile" style="display: none" type="file" name="upfile"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" value="${userName!''}" disabled class="layui-input layui-disabled"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" value="${info.name!''}" placeholder="请输入真实姓名" class="layui-input realName"> </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" lay-verify="required" value="男" title="男" />
                    <input type="radio" name="sex" lay-verify="required" value="女" title="女" />
                    <input type="hidden" id="sysex" value="${info.sex!''}" lay-verify="sysex" placeholder="" /> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" lay-verify="required|number" value="${info.age!''}" placeholder="请输入年龄" class="layui-input realName"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="tel" name="phone" lay-verify="required|phone" value="${info.phone!''}" placeholder="请输入手机号码" class="layui-input userPhone"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生年月</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入出生年月" name="birthday" id="date" lay-verify="required|date" value="${info.birthday!''}" readonly class="layui-input userBirthday"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" lay-verify="required" name="synopsis" class="layui-textarea myself">${info.synopsis!''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" type="button" lay-filter="form">立即提交</button>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/shop/static/layui/layui.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/shop/static/js/common/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/shop/static/js/common/ajaxfileupload.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/shop/static/js/common/popup.js"></script>
    <script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
        form.verify({
            sysex: function(value) {
                if(value == '') {
                    return "请选择性别！";
                }
            }
        });
        //单选监听及过滤事件
        form.on('radio', function(data) {
            if(data.value == '男' || data.value == '女') {
                $("#sysex").val(1);
            }
        });
        form.on('submit(form)', function() {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/shop/main/saveUpUserInfo",
                    data: $('#infoForm').serialize(),
                    async: false,
                    error: function(request) {
                        layer.msg('系统错误！');
                    },
                    success: function(data) {
                        if(data.code = "1") {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function() { //提示框设定显示1秒
                                location.reload();
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            })
            //表单初始赋值
        form.val('example', {
            "sex": "${info.sex!''}",
        })
    });
    /* 上传图片 */
    $("#upload").on('click', function() {
        $("#upfile").click();
    });
    $("#upfile").on("change", upfile);

    function upfile() {
        var fileSize = $("#upfile")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 1048576) {
            showTips('请上传大小小于1M的图片');  
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/shop/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile',
                success: function(data) {
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#upload").attr("src", data.path);
                    $("#headPortrait").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile").on("change", upfile);
                }
            });        	
        }
    }
    </script>
</body>

</html>